<script setup>
import { onMounted, watch } from 'vue'
import { useBookStore } from '@/stores/book'
import { useRouter } from 'vue-router'

const router = useRouter()
const bookStore = useBookStore()

// 初始化加载数据
onMounted(() => {
  bookStore.fetchBooks()
  bookStore.fetchCategories()
})

// 监听分页变化
watch(
  () => bookStore.pagination.current_page,
  () => bookStore.fetchBooks()
)

// 监听每页数量变化
watch(
  () => bookStore.pagination.per_page,
  (newVal) => {
    bookStore.pagination.current_page = 1 // 重置到第一页
    bookStore.fetchBooks()
  }
)

// 搜索方法
const handleSearch = () => {
  bookStore.pagination.current_page = 1
  bookStore.fetchBooks()
}

// 排序方法
const handleSort = (field) => {
  if (bookStore.sortField === field) {
    bookStore.sortOrder = bookStore.sortOrder === 'asc' ? 'desc' : 'asc'
  } else {
    bookStore.sortField = field
    bookStore.sortOrder = 'asc'
  }
  bookStore.fetchBooks()
}
</script>

<template>
  <div class="books">
    <h2>图书列表</h2>
    
    <div class="toolbar">
      <el-input
        v-model="bookStore.searchQuery"
        placeholder="搜索书名、作者或出版社"
        style="width: 300px; margin-right: 20px;"
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button @click="handleSearch">
            <el-icon><Search /></el-icon>
          </el-button>
        </template>
      </el-input>
      
      <el-select
        v-model="bookStore.selectedCategory"
        placeholder="按分类筛选"
        clearable
        style="width: 200px;"
        @change="bookStore.fetchBooks"
      >
        <el-option-group
          v-for="(group, index) in bookStore.categories.level1"
          :key="index"
          :label="group"
        >
          <el-option
            v-for="(item, idx) in bookStore.categories.level2"
            :key="idx"
            :label="item"
            :value="item"
          />
        </el-option-group>
      </el-select>
    </div>
    
    <el-table 
      :data="bookStore.books" 
      style="width: 100%; margin-bottom: 20px;"
      v-loading="bookStore.loading"
    >
      <el-table-column 
        prop="id" 
        label="ID" 
        width="80" 
        sortable 
        @sort-change="() => handleSort('id')"
      />
      <el-table-column label="封面" width="120">
        <template #default="{ row }">
          <el-image 
            :src="row.image_url" 
            :preview-src-list="[row.image_url]" 
            fit="cover" 
            style="width: 80px; height: 100px;"
          />
        </template>
      </el-table-column>
      <el-table-column 
        prop="title" 
        label="书名" 
        @sort-change="() => handleSort('title')"
      />
      <el-table-column 
        prop="author" 
        label="作者" 
        width="120" 
        @sort-change="() => handleSort('author')"
      />
      <el-table-column prop="publisher" label="出版社" width="150" />
      <el-table-column 
        prop="price" 
        label="价格" 
        width="100" 
        sortable
        @sort-change="() => handleSort('price')"
      >
        <template #default="{ row }">
          {{ row.price ? `¥${row.price}` : '-' }}
        </template>
      </el-table-column>
      <el-table-column 
        prop="rating" 
        label="评分" 
        width="100" 
        sortable
        @sort-change="() => handleSort('rating')"
      >
        <template #default="{ row }">
          <el-rate 
            v-model="row.rating" 
            disabled 
            show-score 
            :max="10" 
            :score-template="row.rating ? row.rating.toFixed(1) : '0.0'" 
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button 
            type="primary" 
            size="small" 
            @click="router.push(`/books/${row.id}`)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination
      v-model:current-page="bookStore.pagination.current_page"
      :page-size="bookStore.pagination.per_page"
      :page-sizes="[10, 20, 50, 100]"
      :total="bookStore.pagination.total"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="bookStore.changePage"
      @size-change="bookStore.changePerPage"
      background
    />
  </div>
</template>

<style scoped>
.books {
  padding: 20px;
}

.toolbar {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
</style>